<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户名提取测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .success { color: green; }
        .error { color: red; }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
            white-space: pre-wrap;
        }
        .examples {
            background-color: #e9ecef;
            padding: 15px;
            border-radius: 4px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>用户名提取测试</h1>
    
    <div class="test-section">
        <h3>测试用户名提取功能</h3>
        <p>输入查询内容，测试是否能正确提取用户名：</p>
        
        <input type="text" id="queryInput" placeholder="例如：为小明推荐职场通勤穿搭" />
        <button onclick="testUsernameExtraction()">测试提取</button>
        
        <div id="extractionResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>测试用例</h3>
        <div class="examples">
            <p><strong>正确格式示例：</strong></p>
            <ul>
                <li>为小明推荐职场通勤穿搭</li>
                <li>为小红推荐夏季运动穿搭</li>
                <li>为李华推荐约会休闲穿搭</li>
                <li>为张三推荐冬季户外穿搭</li>
                <li>为Alice推荐商务正装穿搭</li>
            </ul>
            
            <p><strong>错误格式示例：</strong></p>
            <ul>
                <li>推荐小明职场穿搭</li>
                <li>小明需要职场穿搭</li>
                <li>职场通勤穿搭推荐</li>
            </ul>
        </div>
        
        <button onclick="runAllTests()">运行所有测试</button>
        <div id="allTestsResult" class="result"></div>
    </div>

    <script>
        // 用户名提取函数（与前端代码一致）
        function extractUsername(input) {
            const match = input.match(/为([\u4e00-\u9fa5a-zA-Z0-9_]+)推荐/)
            return match ? match[1] : ''
        }
        
        // 测试单个查询
        function testUsernameExtraction() {
            const input = document.getElementById('queryInput').value.trim()
            const resultDiv = document.getElementById('extractionResult')
            
            if (!input) {
                resultDiv.innerHTML = '❌ 请输入查询内容'
                resultDiv.className = 'result error'
                return
            }
            
            const username = extractUsername(input)
            
            if (username) {
                resultDiv.innerHTML = `✅ 提取成功！\n用户名: ${username}\n完整查询: ${input}`
                resultDiv.className = 'result success'
            } else {
                resultDiv.innerHTML = `❌ 提取失败！\n输入内容: ${input}\n\n请使用"为[用户名]推荐..."格式`
                resultDiv.className = 'result error'
            }
        }
        
        // 运行所有测试用例
        function runAllTests() {
            const testCases = [
                '为小明推荐职场通勤穿搭',
                '为小红推荐夏季运动穿搭',
                '为李华推荐约会休闲穿搭',
                '为张三推荐冬季户外穿搭',
                '为Alice推荐商务正装穿搭',
                '推荐小明职场穿搭',
                '小明需要职场穿搭',
                '职场通勤穿搭推荐',
                '为小明推荐',
                '为小明',
                '推荐穿搭'
            ]
            
            const resultDiv = document.getElementById('allTestsResult')
            let results = []
            
            testCases.forEach((testCase, index) => {
                const username = extractUsername(testCase)
                const status = username ? '✅' : '❌'
                const result = username ? `提取到用户名: ${username}` : '提取失败'
                results.push(`${index + 1}. ${status} "${testCase}" - ${result}`)
            })
            
            resultDiv.innerHTML = results.join('\n')
            resultDiv.className = 'result'
        }
        
        // 回车键触发测试
        document.getElementById('queryInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                testUsernameExtraction()
            }
        })
    </script>
</body>
</html>
